<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <Navbar ref="header"></Navbar>
    </transition >
    <div class="content" ref="conT">
      <transition name="slide"  mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Navbar from 'base/navbar/navbar'
export default {
  data () {
    return {
    }
  },
  components: {
    Navbar
  }
}
</script>

<style scoped lang="stylus" rle="stylesheet/stylus">
.content
  height auto
  float right
  width 100%
  margin-top 32px
  background-color #FFF
@media screen and (max-width: 960px) {
  .content {
    width 100%
    z-index 2
    position absolute
  }
}
// &.normal-enter-active, &.normal-leave-active
//     transition: all 0.4s
//   // .top, .bottom
//   //   transition: all 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32)
// &.normal-enter, &.normal-leave-to
//   opacity: 0
// .top
//   transform: translate3d(0, 100px, 0)
// .bottom
//   transform: translate3d(0, 100px, 0)
.fade-enter-active, .fade-leave-active
  transition: opacity .25s
.fade-enter, .fade-leave-to
  opacity: 0
.slide-enter-active,.slide-leave-active
  transition: all 0.25s
.slide-enter,.slide-leave-to
  transform: translate3d(-100%, 0, 0)
</style>
